<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>The Aloha Editor - Just another debugging page</title>
	<link rel="stylesheet" href="/Aloha-Editor/src/css/aloha.css" type="text/css">

	<script language="javascript">
		Aloha = window.Aloha || {};

		Aloha.settings = {
			logLevels: {'error': true, 'warn': true, 'info': true, 'debug': false},
			errorhandling : true,
			sidebar: {
				disabled: false
			},
			floatingmenu: {
				behaviour: 'topalign'
			},
			plugins: {
				abbr: {
					config: [ 'abbr' ],
					
					editables: {
						'#one': [ 'abbr' ],
						'#two': [ ]
					}
				},
				
				highlighteditables: {
					config: [ 'highlight' ],
					
					editables: {
						'#one': [ 'highlight' ],
						'#two': [ ]
					}
				},
				
				block: {
					defaults : {
						'.product-teaser': {
							'block-type': 'ProductTeaserBlock'
						}
					}
				},

				format: {
					config: [  'b', 'i', 'p', 'sub', 'sup', 'del', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'removeFormat' ],
					editables: {
						'#one': [ 'b', 'i' ],
						'#two': [ ]
					}
				},

				list: {
					config: [ 'ol', 'ul' ],
					editables: {
						'#one': [ 'ul' ],
						'#two': [ ]
					}
				},

				// todo
				characterpicker: {
					/*characters: '&#38; &#34; &#162; &#8364;',*/
					config: '&#38; &#34; &#162; &#8364;',
					editables: {
						'#one': '&#38; &#34;',
						'#two': false // or ''
					}
				},
				
				table: {
				    config : [ 'table' ],

					editables: {
						'#one': [ 'table' ],
						'#two': [ ]
					}
				},

				// todo
				image: {
					config: {
				    'maxWidth': 16,
				    'minWidth': 3,
				    'maxHeight': 12,
				    'minHeight': 3,
				    // This setting will correct manually values that are out of bounds
				    'autoCorrectManualInput': true,  
				    // This setting will define a fixed aspect ratio for all resize actions
				    'fixedAspectRatio' : true, 
				    // When enabled this setting will order the plugin to automatically resize images to given bounds
				    'autoResize': true
					},
					editables: {
						'#one': {
						    'maxWidth': 1600,
						    'minWidth': 3,
						    'maxHeight': 1200,
						    'minHeight': 3,
						    // This setting will correct manually values that are out of bounds
						    'autoCorrectManualInput': true,  
						    // This setting will define a fixed aspect ratio for all resize actions
						    'fixedAspectRatio' : false, 
						    // When enabled this setting will order the plugin to automatically resize images to given bounds
						    'autoResize': false
						},
						'#two': [ ]
					}
				},

				horizontalruler: {
					config: [ 'hr' ],
					editables: {
						'#one': [ 'hr' ],
						'#two': [ ]
					}
				},

				// in the rare case that no formating option is available, a link is in the text and link is deactivated there can be a "ghost link tab without tab but contents of tab" ...
				link: {
					config: [ 'a' ],
					editables: {
						'#one': [ 'a' ],
						'#two': [ ]
					}
				},

				align: {
					/* alignment: [ 'center','justify' ], // old config */
					config: false, // any empty value will use the specified default alignment options (all)
					editables: {
						'#one': {
							alignment: [ 'center','justify' ]
						},
						'#two': {
							alignment: false // use this setting do deactivate alignment for an editable
						}
					} //*/
				},

				cite: {
					referenceContainer: '#references',
					sidebar: {
						open: false
					},
					config: [ 'quote', 'blockquote' ],
					editables: {
						'#one': [ 'quote' ],
						'#two': []
					}
				},

				headerids: {
					config: [ 'true' ],
					editables: {
						'#one': [ 'true' ],
						'#two': [ ]
					}
				},

				'numerated-headers': {
					config: {
						numeratedactive: true,
						headingselector: 'h1'
					},
					editables: {
						'#one': { 
							numeratedactive: true,
							headingselector: 'h1, h2'
						},
						'#two': { numeratedactive: false }
					}
				},

				'wai-lang': {
					config: [ 'span' ],
					editables: {
						'#one': [ 'span' ],
						'#two': [ ]
					}
				},

				metaview: {
					config: [ 'metaview' ],
					editables: {
						'#one': [ 'metaview' ],
						'#two': [ ]
					}
				},

				listenforcer: {
					editables: [ ] // [ '#two' ]
				},

				// todo
				undo: {
					disabledEditables: [ '#two' ]
				},

				// todo
				contenthandler: {
					config: [ 'word', 'generic', 'sanitize', 'formatless' ],
					editables: {
						'#one': [ 'word', 'generic', 'formatless' ],
						'#two': []
					}
					
				},


				// todo
				formatlesspaste: {
					/*formatlessPasteOption: true,
					strippedElements : [
						"a",
						"em"
					],*/
					config: {
						formatlessPasteOption: true,
						strippedElements : [
							"a",
							"em"
						]
					},
					editables: {
						'#one': {
							formatlessPasteOption: true,
							strippedElements : [
								"a"
							]
						},
						'#two': {
							formatlessPasteOption: false
						}
					}
					
				}

			},

			// todo
			contentHandler: {
				/*initEditable: [ ]*/
			}
		};

		/*
		common/abbr,
							common/block,
							common/format,
							common/commands,
							common/dom-to-xhtml,
							common/image,
							common/list,
							common/table,
							common/align,
							common/characterpicker,
							common/contenthandler,
							common/horizontalruler,
							common/link,
							common/paste,
							common/undo,
							common/highlighteditables,
							extra/browser,
							extra/cite,
							extra/formatlesspaste,
							extra/headerids,
							extra/linkbrowser,
							extra/listenforcer,
							extra/metaview,
							extra/numerated-headers,
							extra/flag-icons,
							extra/wai-lang

common/characterpicker, --> breaks activate event

common/image, --> breaks paste action
		*/

	</script>


	<script src="/Aloha-Editor/src/lib/aloha.js" 
		data-aloha-plugins="common/commands,
							common/format,
							common/link,
							
							common/abbr,
							common/block,
							
							common/dom-to-xhtml,

							

							common/list,
							common/table,
							common/align,
							
							common/contenthandler,
							common/horizontalruler,
							common/paste,
							common/undo,
							common/highlighteditables,
							extra/browser,
							extra/cite,
							extra/formatlesspaste,
							extra/headerids,
							extra/linkbrowser,
							extra/listenforcer,
							extra/metaview,
							extra/numerated-headers,
							extra/flag-icons,
							extra/wai-lang">
	</script>
	
	<style>
		.editable {
			margin: 20px 0 20px 500px;
		}
		
		.aloha-editable-active, .aloha-editable-active[contenteditable=true]:focus {
			outline: #80B5F2 solid 1px;
		}
	</style>
</head>
<body>

	<div class="editable" id="one">
		<h1>heading 1</h1>
		<h2>heading 2</h2>
		one: Hello World <a href="#foo">foo</a>
		<!-- a comment -->
		<img src="http://aloha-editor.org/images/aloha-editor-logo.png" />
	</div>
	
	<div class="editable" id="two">
		<h1>heading 1</h1>
		<h2>heading 2</h2>
		two: Aloha World <a href="#foo">foo</a>
	</div>

	<div class="editable" id="three">
		<h1>heading 1</h1>
		<h2>heading 2</h2>
		<strong>three:</strong> Foo <i>Bar</i> <a href="#foo">foo</a>
		<img src="http://aloha-editor.org/images/aloha-editor-logo.png" />
	</div>

<div id="references">
	
</div>
<hr />


Notes:<br />
* block -- config ok?<br />
* commands -- global<br />
* dom-to-xhtml -- global<br />
* undo -- global<br />
* paste -- global<br />

* browser -- global; internal config (deactivate browser for single editables / other config per editable or type like image / link)<br />
* linkbrowser -- internal config (deactivate browser for single editables (via link plugin?); all settings configable?)<br />

* flag-icons -- global; no config (just returns path); needs to be active for wai-lang (+ metaview! --> uses images)<br />

<br />

* characterpicker -- button is not hideable when no config is provided<br />
* cite -- config crashes browser (but was working weeks ago?)<br />

<br />

* table -- needs rewrite for table/row/column/insidebar config<br />
* image -- needs rewrite for ui options / callbacks<br />
* link -- needs rewrite for target/css regex<br />


* contenthandler<br />


* formatlesspaste -- needs rewrite --> button handling not always working; new config structure<br />
* listenforcer -- using settings array; type is missing; extend + old compatible?<br />

<br /><br />

Plugins:<br />
* [ok] common/abbr<br />
* [note] common/block<br />
* [ok] common/format<br />
* [note] common/commands<br />
* [ok] common/highlighteditables<br />
* [note] common/dom-to-xhtml<br />
* [note] common/image<br />
* [ok] common/list<br />
* [note] common/table<br />
* [ok] common/align<br />
* [note] common/characterpicker<br />
* [note] common/contenthandler<br />
* [ok] common/horizontalruler<br />
* [note] common/link<br />
* [note] common/paste<br />
* [note] common/undo<br />
* [note] extra/browser<br />
* [nok] extra/cite<br />
* [nok] extra/formatlesspaste<br />
* [ok] extra/headerids<br />
* [note] extra/linkbrowser<br />
* [note] extra/listenforcer<br />
* [ok] extra/metaview<br />
* [ok] extra/numerated-headers<br />
* [note] extra/flag-icons<br />
* [ok] extra/wai-lang<br />

<br /><br />

<pre>
	var config = this.getEditableConfig(obj);
</pre>


<script type="text/javascript">
Aloha.ready(function() {
	Aloha.require( ['aloha', 'aloha/jquery', 'aloha/floatingmenu'], function( Aloha, $, FloatingMenu) {
		$(".editable").aloha();

		Aloha.bind( 'aloha-smart-content-changed', function( $event, params ) {
			//window.console.log( 'Smart content changed event', params );
		} );
		Aloha.bind( 'aloha-editable-deactivated', function( ) {
			window.console.log('X aloha-editable-deactivated'); // , Aloha.activeEditable.getContents()
		} );
		Aloha.bind( 'aloha-editable-activated', function( ) {
			window.console.log('X aloha-editable-activated');
		} );
	});
});
</script>
</body>
</html>